<template>
    <div class="grid" v-if="$route.name===$options.name">
        <ChfGrid v-bind="gridOptions" ref="grid">
            <!-- <template #input>
                <el-input v-model="value" style="margin-right:10px;width:150px"></el-input>
            </template> -->
        </ChfGrid>
    </div>
    <router-view v-else />
</template>



<script>
import formConfigFn from "./formConfig.js";
import grid from "@/mixins/grid.js";
import { mapState } from 'vuex';
export default {
    mixins: [grid],
    name: "basicGrid",
    data () {
        return {
            value: 1,
            formConfig: formConfigFn(this),
            gridOptions: {
                tableConfig: {
                    options: {
                        data: [
                            // {
                            //     "id": 1,
                            //     "name": "邱秀兰",
                            //     "age": 22,
                            //     "birthday": "1972-04-20 18:43:56",
                            //     "gender": 0,
                            //     "img": "http://dummyimage.com/88x31",
                            //     "county": "甘肃省 天水市 甘谷县",
                            //     "hasChildren": true,
                            //     "boolDel": 1
                            // }
                        ],
                        // column: true
                    },
                    columns: [
                        { type: "selection", width: 60 },
                        { label: "id", prop: "id", width: 120 },
                        { label: "姓名", prop: "name" },
                        {
                            label: "性别",
                            prop: "gender",
                            formatter: ({ gender }) => {
                                return gender ? "男" : "女";
                            },
                            // 筛选演示
                            columnKey: "gender",
                            filters: [
                                { text: "男", value: 1 },
                                { text: "女", value: 0 },
                            ],
                            ["filter-method"] (value, row, column) {
                                return row.gender === value;
                            },
                        },
                        {
                            label: "年龄",
                            prop: "age",
                            width: 200,
                            sortable: true,
                        },
                        //render演示
                        // {
                        //     label: "图片",
                        //     render: (row) => {
                        //         return (
                        //             <el-image style="width: 100px; height: 100px" src={row.img} previewSrcList={[row.img]} fit="contain"></el-image>
                        //         )
                        //     }
                        // },
                        { label: "家庭住址", prop: "county" },

                        {
                            label: "出生日期",
                            prop: "birthday",
                            width: 200,
                            sortable: true,
                        },
                        // 插槽演示
                        // {
                        //     label: "操作",
                        //     type: "slot",
                        //     slotName: "operate",
                        // },
                        // render样式
                        {
                            label: "操作",
                            render: (row) => {
                                return (
                                    <span>
                                        <ChfButtonP type="text" size="small" on-click={() => {
                                            this.push({ name: "basicGridDetails" }, row);
                                        }} value='编辑' />
                                        <ChfButtonP type="text" size="small" on-click={() => {
                                            this.del(row.id);
                                        }} value="删除" />
                                    </span>
                                );
                            },
                        },
                    ],
                    events: {
                        "selection-change": (list) => {
                            this.batchId = list.map((item) => item.id);
                        },
                    },
                },
                toolbarConfig: [
                    {
                        slotName: 'input'
                    },
                    {
                        content: "新增",
                        type: "primary",
                        icon: "el-icon-plus",
                        click: () =>
                            this.push({ name: "basicGridDetails" }),
                    },
                    {
                        content: "上传",
                        type: "primary",
                        icon: "el-icon-upload",
                        click: async () => {
                            const files = await this.$readFile({
                                accept: ".png",
                                fileSize: 2,
                                // multiple: true,
                            })
                            this.$message.success(`选了${files.length || 1}个文件`);
                            console.log(files);
                        }
                    },
                    {
                        content: "批量删除",
                        icon: "el-icon-delete",
                        click: () => this.del(),
                    },
                ],
                pagerConfig: {
                    options: {
                        pageSize: 10,
                    },
                    events: {},
                },
                proxyConfig: {
                    api: "getTableData",
                    //请求之前
                    beforeQuery (params) {
                        return params;
                    },
                },
                formConfig: {
                    options: {
                        inline: true,
                        // size: 'mini',
                    },
                    items: [
                        {
                            formItem: { label: "性别" },
                            itemRender: {
                                el: "el-select",
                                placeholder: "选择性别",
                                value: "region",
                                options: [],
                                async query () {
                                    setTimeout(() => {
                                        this.options = [
                                            { label: "男", value: 1 },
                                            { label: "女", value: 0 },
                                        ];
                                    }, 5000);
                                },
                            },
                        },
                        {
                            formItem: { label: "姓名" },
                            itemRender: {
                                el: "el-input",
                                placeholder: "搜索姓名",
                                value: "name",
                            },
                        },
                        {
                            type: 'button',
                            formItem: {
                                children: [
                                    { content: '查询', submit: true, type: 'primary' },
                                    { content: '重置', reset: true }
                                ]
                            }
                        }
                    ],
                },
            },
        };
    },
    mounted () {
        console.log(this.authorityList)
    },
    computed: {
        ...mapState('user', ['authorityList'])
    }
};
</script>

<style lang="scss" scoped>
.grid {
    background: white;
}
</style>